<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <button id="addBtn">+1</button>
  <span id="count">0</span>
  <script>
    const event = {
      funs: {},
      listen: function (key, fn) {
        if (this.funs[key]) {
          this.funs[key].push(fn);
          return;
        };
        this.funs[key] = [fn];
      },
      trigger: function() {
        const key = Array.prototype.shift.call(arguments);
        for (let fn of this.funs[key]) {
          fn.call(this, arguments[0])
        }
      }
    }
    event.listen('add', function(count) {
      const dom = document.getElementById('count');
      dom.innerHTML = count;
    })
    let count = 0;
    const dom = document.getElementById('addBtn');
    dom.addEventListener('click', function() {
      count += 1;
      event.trigger('add', count)
    },)
  </script>
</body>

</html>